<template>
	<div class="personal">
		<div class="header" @click="handleGo('/pagesA/user/coachMine')">
			<img :src="faceImageFile ? faceImageFile : 'https://newmefit.cn/resource/gym/base/base3.jpg'" class="avatar" mode="aspectFill"/>
			<div class="personal-info">
				<h5>{{ memberData.userName }}</h5>
				<p>{{ memberData.phone }}</p>
			</div>
		</div>
		<div class="personal-main">
			<ul class="list-menu">
				<li @click="handleGo('/pagesA/home/selectMemberNew')">
					<i class="picon picon-9"></i>
					<span>我的会员</span>
					<i class="picon-right"></i>
				</li>
				<li @click="handleGo('/pagesA/preOrder/preOrderHistory')">
					<i class="picon picon-3"></i>
					<span>预约历史</span>
					<i class="picon-right"></i>
				</li>
				<li @click="handleGo('/pagesA/sign/signCourseList')">
					<i class="picon picon-7"></i>
					<span>课程签约</span>
					<i class="picon-right"></i>
				</li>
				<li @click="handleGo('/pagesA/user/orderMine?from=coach')">
					<i class="picon picon-1"></i>
					<span>订单管理</span>
					<i class="picon-right"></i>
				</li>
				<li @click="handleGo('/pagesA/home/storeDetail?id='+getStore('coachStoreId'))">
					<i class="picon picon-8"></i>
					<span>店铺信息</span>
					<i class="picon-right"></i>
				</li>
				<li @click="handleGo('/pagesA/user/acRecords')">
					<i class="picon picon-4"></i>
					<span>门禁记录</span>
					<i class="picon-right"></i>
				</li>
				<li @click="handleGo('/pagesA/user/agreement')">
					<i class="picon picon-11"></i>
					<span>会员协议</span>
					<i class="picon-right"></i>
				</li>
				<li @click="handleGo('/pagesA/user/rest')">
					<i class="picon picon-11"></i>
					<span>休息设置</span>
					<i class="picon-right"></i>
				</li>
				<li>
					<i class="picon picon-5"></i>
					<span>版本信息</span>
					<em class="picon-right1">v1.3.1</em>
				</li>
			</ul>
			<span class="logout" @click="logout">退出登录</span>
		</div>
		<navbar title="我的"></navbar>
		<bottom :activePageIndex="3"></bottom>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPublicUrl } from '@/api/manageApi'
import bottom from '@/components/bottom/bottom'
import navbar from '@/components/navbar/navbar'
import {getStore, setStore} from '@/util/service'
export default {
	components: {
		bottom,
		navbar
	},
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			scrollHeight: 200,
			scrollLeft: 0,
			memberData: {},
			faceImageFile: ''
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken'])
	},
	onLoad() {
		this.memberData = this.userInfo
		if (this.userInfo.portraitPictureFileId) {
			getPublicUrl({fileId: this.userInfo.portraitPictureFileId}).then(response => {
				this.faceImageFile = response.data
			})
		}
	},
	methods: {
		getStore: getStore,
		handleGo(url) {
			this.goUrl(url)
		},
		logout(){
			uni.showModal({
				title:'提示',
				content:'确认退出登录吗？'
			}).then((res)=>{
				if(res.confirm){
					this.$store.commit('user/SET_TOKEN', '')
					this.$store.commit('user/SET_USER_INFO', {})
					this.$store.commit('user/SET_ROLE', [])
					uni.reLaunch({
						url: '/pages/user/login'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">
.personal {
	padding-top: 170rpx;
	.header{
		width: 100%;
		height: 345rpx;
		background: url('../../static/personal1.png') no-repeat 0 0;
		background-size: contain;
		padding: 40rpx 28rpx;
		box-sizing: border-box;
		display: flex;
		img{
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			margin-right: 19rpx;
		}
		.personal-info{
			h5{
				font-size: 34rpx;
				color: #FFFFFF;
				margin: 18rpx 0;
			}
			p{
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
	.personal-main{
		width: 702rpx;
		margin: -140rpx auto 0;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		padding: 28rpx 28rpx 200rpx;
		box-sizing: border-box;
		.list-menu{
			li{
				width: 100%;
				height: 112rpx;
				line-height: 112rpx;
				position: relative;
			}
		}
		.logout{
			width: 646rpx;
			height: 80rpx;
			background: #F2F2F2;
			border-radius: 10rpx;
			font-size: 32rpx;
			color: #FF5A20;
			line-height: 80rpx;
			text-align: center;
			margin-top: 32rpx;
			display: inline-block;
		}
	}
	.picon{
		width: 38rpx;
		height: 38rpx;
		display: inline-block;
		margin-right: 27rpx;
		vertical-align: middle;
		margin-top: -4rpx;
	}
	.picon-right{
		width: 10rpx;
		height: 18rpx;
		display: inline-block;
		background: url('../../static/right2.png') no-repeat 0 0;
		background-size: cover;
		position: absolute;
		right: 8rpx;
		top: 47rpx;
	}
	.picon-right1{
		width: 65rpx;
		height: 21rpx;
		line-height: 21rpx;
		font-size: 28rpx;
		color: #838383;
		display: inline-block;
		position: absolute;
		right: 8rpx;
		top: 47rpx;
		padding: 0;
		margin: 0;
	}
	.picon-1{
		background: url('../../static/personal2.png') no-repeat 0 0;
		background-size: cover;
	}
	.picon-2{
		background: url('../../static/personal3.png') no-repeat 0 0;
		background-size: cover;
	}
	.picon-3{
		background: url('../../static/personal4.png') no-repeat 0 0;
		background-size: cover;
	}
	.picon-4{
		background: url('../../static/personal5.png') no-repeat 0 0;
		background-size: cover;
	}
	.picon-5{
		background: url('../../static/personal6.png') no-repeat 0 0;
		background-size: cover;
	}
	.picon-6{
		background: url('../../static/personal7.png') no-repeat 0 0;
		background-size: cover;
	}
	.picon-7{
		background: url('../../static/personal8.png') no-repeat 0 0;
		background-size: cover;
	}
	.picon-8{
		background: url('../../static/personal9.png') no-repeat 0 0;
		background-size: cover;
	}
	.picon-9{
		background: url('../../static/personal10.png') no-repeat 0 0;
		background-size: cover;
	}
	.picon-10{
		background: url('../../static/personal11.png') no-repeat 0 0;
		background-size: cover;
	}
	.picon-11{
		background: url('../../static/personal12.png') no-repeat 0 0;
		background-size: cover;
	}
}
</style>
